<template>
  <div class="AddBroadcastMachine">
    <div class="cus-title">
      <h4>编辑播报机</h4>
    </div>
    <div class="cus-update">
      <el-row style="margin-bottom: 20px">
        <el-col :span="24">
          <el-alert
            title="请填写播报机信息"
            type="info"
            show-icon
            :closable="false"
          />
        </el-col>
      </el-row>
      <el-form ref="form" :model="BindForm" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="播报机编号:" prop="playerId">
          <el-col :span="24">
            <el-input v-model="BindForm.playerId" :disabled="true" placeholder="请输入播报机编号" maxlength="20" clearable class="cus-input" />
          </el-col>
        </el-form-item>
        <el-form-item prop="storeId" label="门店:">
          <el-col :span="24">
            <store-select ref="storeSelect" v-model="BindForm.storeId" :disabled="true" field="id" />
          </el-col>
        </el-form-item>
        <el-form-item v-if="versionList" label="版本号:" prop="editionId">
          <el-col :span="24">
            <el-select v-model="BindForm.editionId" class="cus-input" clearable filterable style="width:100%; max-width: 400px">
              <el-option v-for="(item, index) in versionList" :key="index" :value="item.id" :label="item.versionName" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认编辑</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="danger" @click="unbind">解绑</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import StoreSelect from '../../../components/StoreSelect/index'
import { Loading } from 'element-ui'
import { editionList, playerAdd } from '@/api/shop'

/** 编辑播报机 */
export default {
  name: 'EditBroadcastMachine',
  components: { StoreSelect },
  data() {
    var validateNumber = (rule, value, callback) => {
      var Regx = /^[A-Za-z0-9]*$/
      if (value && value.length > 0 && !Regx.test(value)) {
        callback(new Error('请输入正确的播报机编号'))
      } else {
        callback()
      }
    }
    return {
      versionList: null,
      BindForm: {
        opt: 'edit',
        playerId: null,
        type: 0,
        storeId: null,
        editionId: null,
        shopId: parseInt(localStorage.getItem('shopId'))
      },
      rules: {
        playerId: [{ required: true, message: '请输入播报机编号', trigger: 'change' }, { validator: validateNumber, trigger: 'change' }],
        storeId: [{ required: true, message: '请选择门店', trigger: 'change' }],
        editionId: [{ required: true, message: '请选择版本号', trigger: 'change' }]
      }
    }
  },
  created() {
    const vm = this

    const params = vm.$dd(vm.$route.query.p)

    if (!params) {
      this.$alert('禁止非法访问！', '系统提示', {
        confirmButtonText: '确定',
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        type: 'error',
        callback: action => {
          vm.$store.dispatch('tagsView/delView', vm.$route)
          vm.$router.go(-1)
        }
      })
      return
    }

    vm.BindForm.playerId = params.annoNum
    vm.BindForm.storeId = params.storeId.toString()
    vm.BindForm.editionId = parseInt(params.editionId)

    editionList().then(res => {
      vm.versionList = res.data.data
    })
  },
  methods: {
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
    },
    unbind() {
      const vm = this

      this.$confirm('确定要解绑播报机吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loadingInstance = Loading.service({ fullscreen: true })
        playerAdd({
          opt: 'unbind',
          playerId: parseInt(vm.BindForm.playerId),
          shopId: vm.BindForm.shopId
        }).then(res => {
          loadingInstance.close()
          vm.$store.dispatch('tagsView/delView', vm.$route)
          vm.$router.go(-1)
          vm.$message.success('解绑播报机成功')
        }).catch(res => {
          loadingInstance.close()
          if (res && res.data && res.data.errno !== 0) {
            this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
          }
        })
      })
    },
    submit() {
      const vm = this
      vm.$refs.form.validate((valid) => {
        if (valid) {
          const loadingInstance = Loading.service({ fullscreen: true })
          playerAdd(vm.BindForm).then(res => {
            loadingInstance.close()
            vm.$store.dispatch('tagsView/delView', vm.$route)
            vm.$router.go(-1)
            vm.$message.success('编辑播报机成功')
          }).catch(res => {
            loadingInstance.close()
            if (res && res.data && res.data.errno !== 0) {
              this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.AddBroadcastMachine {
  padding: 30px;
  .cus-update {
    padding: 20px 30px;
    padding-bottom: 0px;
    margin-bottom: 30px;
    border: 1px solid #eee;

    .cus-input {
      max-width: 400px;
    }
  }
}
</style>
